<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueCDN引入组件的方式</title>
    <style>
        .container {
            padding: 0;
            margin: 0;
        }

        .container .wrap {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>{{ message }}</h1>
            <div class="wrap">
                <button @click="increment">Button tapped {{times}} times</button>
            </div>
        </div>
    </div>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../lib/vue/3/vue.global.js"></script>
    <script>
        const { createApp, ref } = Vue;
        const options = {
            data: function () {
                return {
                    message: 'Hello vue!',
                    times: 0
                }
            },
            methods: {
                increment() {
                    this.times++
                }
            }
        }
        const app = createApp(options);
        // 挂载
        const vm = app.mount('#app');
        // 方法一：直接修改实例的data属性
        setTimeout(() => {
            vm.message = 'Hello Vue 3!';
        }, 2000);
        // 方法二：通过$data属性修改
        setTimeout(() => {
            vm.$data.message = 'Hello World!';
        }, 4000);

        console.log('app', app);
        console.log('app_instance', app._instance);
        console.log('app_instance.data', app._instance.data);
    </script>
</body>